<template>
	<view class="container">
			<view class="type_select">
				<view class="p_type" @click="open_buy_type()">
					<image :src="c_img"></image>
					<text>{{c_name}}</text>
				</view>
				<view class="line"></view>
				<text class="typebuy" @tap="pay_form">支付方式</text>
			</view>
			
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="tab_list">
					<view class="tab_num">
						<view class="tit">150 ADC</view>
						<text>价格 ：6.87 CNY</text>
						<text>金额 ：1030.50 CNY</text>
						<view class='Payment'>
							<text class="zfb">支付宝</text>
							<text class="wx">微信</text>
							<text class="yhk">银行卡</text>
						</view>
					</view>
					<view class="tab_right">
						<view>信誉值<text>98</text></view>
						<button class="hree">购买</button>
					</view>
					<image src="/static/images/g_img36.png" class="my"></image>
				</view>
				<view class="tab_list">
					<view class="tab_num">
						<view class="tit">150 ADC</view>
						<text>价格 ：6.87 CNY</text>
						<text>金额 ：1030.50 CNY</text>
						<view class='Payment'>
							<text class="zfb">支付宝</text>
							<text class="wx">微信</text>
							<text class="yhk">银行卡</text>
						</view>
					</view>
					<view class="tab_right">
						<view>信誉值<text>98</text></view>
						<button>购买</button>
					</view>
				</view>
			</mescroll-body>
				
			<!--弹窗start-->
			<u-popup mode="bottom" :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
				<view class="choose">
					<view class="tit">交易币种<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
					<view class="list">
						<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
							<image :src="item.url"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</u-popup>
			
			<u-popup :show="pay_box" mode="bottom" :closeOnClickOverlay="true" @close="popup_pay_box" customStyle="background: none">
			    <view class="case_box pay_box">
					<view class="tit">支付方式<image src="/static/images/img_31.png" @tap="popup_pay_box"></image></view>
					<view class="pay_name"><image :src="c_img"></image>{{c_name}}</view>
					<view class="list">
						<view class="credit_num">
							 <view @click="case_chagne(index)" :class="{'on': isActive.indexOf(index)!=-1}" v-for="(item,index) in pay_items_CN" :key="index">{{item.num}}</view>
						</view>
					</view>
					<view class="btn">
						<view>
							<button class="submit" @tap="popup_pay_box">重置</button>
							<button class="submit on" @tap="popup_pay_box">确认</button>
						</view>
					</view>
			    </view>
			 </u-popup>
			<!--弹窗end-->

	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default{
	mixins: [MescrollMixin],
	data(){
		return{
			/*mescroll swiper S*/
			//数据列表
			result: [],
			//设置api路径
			api_url : 'demo/waterfall',
			/*mescroll swiper E*/
			tel_show:false,
			c_img:"/static/images/img_03.png",
			c_name:"CNY",
			items: [
				{
					url:'/static/images/img_03.png',
					name:"CNY",
					tel:"+86",
					l_num:"6.83"
				},
				{
					url:'/static/images/img_04.png',
					name:"USD",
					tel:"+1",
					l_num:"0.92"
				},
				{
					url:'/static/images/img_05.png',
					name:"INR",
					tel:"+91",
					l_num:"7.83"
				}
			],
			count: "",
			pay_box: false,
			pay_items_CN:[{
				num:'全部',
			},{
				num:'银行卡',
			},{
				num:'支付宝',
			},{
				num:'微信支付',
			}],
			pay_items_US:[{
				num:'全部',
			},{
				num:'Payeer',
			},{
				num:'Paypal',
			},{
				num:'Revolut',
			},{
				num:'Wise',
			},{
				num:'Zain Cast',
			},{
				num:'银行卡',
			},{
				num:'Cash in Person',
			},{
				num:'Barion',
			},{
				num:'Adv Cash',
			},{
				num:'Afriex',
			},{
				num:'Al-Rafidain Qiservices',
			},{
				num:'Al-Taif',
			},{
				num:'AirTM',
			},{
				num:'Blue',
			},{
				num:'Cash App',
			},{
				num:'Ecopayz',
			},{
				num:'FasterPay',
			},{
				num:'ICard',
			},{
				num:'LeoPay',
			}],
			pay_items_IN:[{
				num:'全部',
			},{
				num:'Payeer',
			},{
				num:'Paypal',
			},{
				num:'Revolut',
			},{
				num:'Wise',
			}],
			isActive: [1,2],
		}
	},
	methods:{
		upCallback(page) {
		    self = this;
		    //获取api数据
		    this.ajax({
		        url: self.api_url,
		        data:{
		            page: page.num,
		            pagesize: page.size
		        }
		    }).then(res => {
		        //如果res.list不是object则赋值为空对象[]
		        let result_ = (typeof(res.data.data)=='object')?res.data.data:[];
		        let result_length = result_.length;
		        //如果是第一页，则将列表数据清空
		        if(page.num == 1)
		            self.list = [];
		        //数据去重：防止最近产生的新数据导致有重复数据
		        result_ = self.$my.filterSame(result_, self.result);
		        //设置列表数据
		        self.result = self.$my.join(self.result, result_); //追加新数据
		        //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
		        //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
		        setTimeout(() => {
		            this.mescroll.endSuccess(result_length);
		        },10);
		    }).catch(()=>{
		        //联网失败, 结束加载
		        this.mescroll.endErr();
		    });
		},
		open_buy_type(){
			this.tel_show=true
		},
		choose_popup_close(){
			this.tel_show = false
		},
		change(e,item) {
			this.count = e;
			this.tel_show = false;
			this.c_name = item.name;
			this.c_img = item.url;
			if(this.count == 0){
				this.pay_items_CN = this.pay_items_CN
			}else if(this.count == 1){
				this.pay_items_CN = this.pay_items_US
			}else{
				this.pay_items_CN = this.pay_items_IN
			}
		},
		pay_form(){
			this.pay_box = true
		},
		case_chagne(index){
		    var that = this;
		    if (that.isActive.indexOf(index) == -1) {
		    	that.isActive.push(index);
		    } else {
		    	that.isActive.splice(that.isActive.indexOf(index), 1);
		    }	
		},
		popup_pay_box(){
			this.pay_box = false
		}
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");

.container{
	padding-top: 0 !important;
}
.container .mescroll-body{
	min-height: auto !important;
}
</style>